<template>
  <q-page class="row gutter-md justify-center">
    <q-inner-loading visible v-if="model.id == 0">
      <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
      <b class="text-primary">数据加载中...</b>
    </q-inner-loading>
    <div class="q-ma-lg" v-if="alert">尚未添加任何中奖用户</div>

    <q-tabs class="col-xs-12 col-md-10" align="justify" inverted v-if="model.id>0&&list.length>0">
      <!-- 选项卡 - 注意slot="title" -->
      <q-tab slot="title" label="全部"  @select="select(null)" default />
      <q-tab slot="title" label="未签到"  @select="select(0)" :count="uncheckedCount"  />
      <q-tab slot="title" label="已签到"  @select="select(1)" :count="checkedCount" />
      <q-tab slot="title" label="已拉黑"  @select="select(-1)" />
      <q-route-tab slot="title" label="临时页" :to="'/anon/event/'+$route.params.id+'/check'" />

      <!-- 目标 -->
      <q-list separator class="q-py-none" :no-border="$q.platform.is.mobile" v-if="list.length>0" >
        <q-alert v-if="readonly" type="warning" class="full-width no-shadow no-border">
            {{warning}}
        </q-alert>
        <q-item class="q-pa-none">
          <q-search icon="mdi-account-search" class="full-width no-shadow" :value="query" 
              inverted-light color="grey-2"
            placeholder="通过昵称及手机号搜索" autofocus="true"
            @input="filterUser" @clear="filterUser('')" clearable/>
        </q-item>
        <q-item v-for="(item) in filteredList" :key="'user_'+item.id">          
          <q-item-main>
            <q-item-tile label>
              <a :href="'https://www.douban.com/people/'+item.id+'/'" target="_blank">{{item.name}}</a>
              <b v-if="item.confirmStatus=='leave'" style="color:orange">(已请假)</b>
              <b v-if="item.confirmStatus==''" style="color:red">(未确认)</b>
            </q-item-tile>
            <q-item-tile sublabel>{{item.phone == '0' ? '' : item.phone}}</q-item-tile>
          </q-item-main>
          <q-item-side right v-if="isWx">
            <q-btn icon="phone" outline dense label="电话" color="primary" class="q-mr-sm q-px-sm"
                @click="makeCall(item.phone)"/>
          </q-item-side>
          <q-item-side right v-if="!readonly">
            <q-btn dense label="签到" color="primary" class="q-mr-sm q-px-sm"
                v-if="item.checked==0" @click="checkPlayer(item)"/>
            
            <!-- seat-map -->
            <template v-if="model.hallName">
              <q-btn dense outline class="q-mr-sm q-px-sm"
                :label="item.seat?item.seat:'未选座'" 
                :color="item.seat?'secondary':'black'" 
                v-if="item.checked>0" @click="viewSeat(item)"/>
            </template>

            <q-btn-dropdown dense outline label="拉黑" color="black" v-if="item.checked==0">
              <!-- 下拉内容 -->
              <q-list separator class="q-pa-none" style="min-width:120px;">
                <q-item class="q-pa-none">
                  <q-btn class="full-width" dense flat v-close-overlay
                      label="临时请假(30天)" @click="blackPlayer(item, '临时请假', 30)" />
                </q-item>
                <q-item class="q-pa-none">
                  <q-btn class="full-width" dense flat v-close-overlay
                      label="无故迟到(30天)" @click="blackPlayer(item, '无故迟到', 30)" />
                </q-item>
                <q-item class="q-pa-none">
                  <q-btn class="full-width" dense flat v-close-overlay
                      label="恶意评论(30天)"  @click="blackPlayer(item, '恶意评分', 30)"/>
                </q-item>
                <q-item class="q-pa-none">
                  <q-btn class="full-width" dense flat v-close-overlay
                      label="无故缺席(90天)" @click="blackPlayer(item, '无故缺席', 90)" />
                </q-item>
                <q-item class="q-pa-none">
                  <q-btn class="full-width" dense flat v-close-overlay
                      label="私下转票(90天)" @click="blackPlayer(item, '私下转票', 90)" />
                </q-item>
                
                <q-item class="q-pa-none">
                  <q-btn class="full-width" dense flat v-close-overlay
                      label="态度恶劣(90天)" @click="blackPlayer(item, '态度恶劣', 90)"/>
                </q-item>
                <q-item class="q-pa-none">
                  <q-btn class="full-width" dense flat v-close-overlay
                      label="违反礼仪(永久)"  @click="blackPlayer(item, '严重违规', 10000)"/>
                </q-item>
              </q-list>
            </q-btn-dropdown>
            <q-btn-dropdown dense outline icon="mdi-check-circle" 
                  :label="item.checked>0?'已签到':'已拉黑'" 
                  :color="item.checked>0?'primary':'black'" v-if="item.checked!=0">
              <!-- 下拉内容 -->
              <q-list separator class="q-pa-none" style="min-width:100px;">
                <q-item class="q-pa-none">
                  <q-btn icon="mdi-restore" class="full-width" dense flat 
                      :color="item.checked>0?'primary':'black'" v-close-overlay
                      label="还原" @click="restorePlayer(item)" />
                </q-item>
              </q-list>
            </q-btn-dropdown> 

            <!-- 短信-->
            <q-btn-dropdown dense outline label="短信" color="primary">
              <!-- 下拉内容 -->
              <q-list separator class="q-pa-none" style="min-width:100px;">
                <q-item class="q-pa-none">
                  <q-btn class="full-width" dense flat v-close-overlay
                      label="观影礼仪提醒"  @click="sms1Player(item)"/>
                </q-item>
              </q-list>
            </q-btn-dropdown> 
          </q-item-side>
        </q-item>
      </q-list>
    </q-tabs>

    <!-- modal -->
    <q-modal v-model="modal" :position="$q.platform.is.mobile?'':'right'" :maximized="$q.platform.is.mobile">      
      <q-toolbar color="primary">
        <q-toolbar-title>签到选座</q-toolbar-title>
        <q-btn flat round dense icon="mdi-close" @click="modal=false" />
      </q-toolbar>
       <my-seat-map v-if="seats" :map="seats" :selected="seats.selected"/>
      
        <div class="q-pa-md">
          <q-btn color="primary" label="确定" class="full-width" 
            :loading="loading"
            @click="selectSeat"  />
       </div>
    </q-modal>
  </q-page>
</template>

<style lang="stylus">
.modal-content .seat-map {height:400px;}
</style>


<script>
import MySeatMap from "../components/MySeatMap.vue";

export default {
  name: 'PageEventCheck',
  components: { MySeatMap },
  data () {
    return {
      modal: false,
      seats: false,
      seatUser: false,
      loading: false,

      isWx: false,
      warning:'',
      selected: null,
      readonly: false,
      alert: false,
      query: '',
      model:{id:0,step:0,hallName:false},
      list:[]
    }
  },
  mounted() {
    let me = this;
    me.refreshPlayers();
    me.loadEventPlay();
    this.$api.ui.pageBackBtn = function(){
      me.$router.push('/event');
    }
    me.isWx = me.$api.wx.isWx();
  },
  methods: {
    sms1Player(item) {
      // 观影礼仪短信
      // ALIYUN_OLD: SMS_185212811
      // ALIYUN: SMS_185232602
      let me = this;
      me.$q.dialog({
                title: '观影礼仪短信确认',
                message: '短信接收手机号: ' + item.phone,
                ok: '立即发送',
                cancel: '取消'
              }).then(() => {
                me.$api.tool.sendSms("SMS_185232602", "ALIYUN", item.phone, res => {
                  me.$q.notify({ message: '观影礼仪提醒发送成功', type: 'positive' });  
                });
              }).catch(() => {
                // cancel 
              });
      
    },
    makeCall(number) {   
      this.$api.wx.makeCall(number);
    },
    select(type) {
      this.selected = type;
    },
    filterUser(val) {
      this.query = val;
    },
    refreshPlayers() {
      let me = this;
      let eventId = me.$route.params.id;
      this.$api.party.loadEventPlayers(eventId, res=>{
        me.list = res.data.model;
        me.alert = (me.list.length == 0);
        me.query = '';
      });
    },
    loadEventPlay() {
      let me = this;
      let eventId = me.$route.params.id;
      this.$api.party.loadEvent(eventId, res=>{
        me.model = res.data.model;
        me.$api.ui.pageTitle = me.model.city + '：《' + me.model.movieName + '》';
      });
    },
    blackPlayer(user, type, days) {
      let me = this;
      let eventId = me.$route.params.id;
      let cause = me.model.movieName + type;
      this.$api.party.blackPlayer(eventId, user, cause, days, res=>{
        user.checked = -1;
        user.note = type;
        me.query = '';
      });
    },
    checkPlayer(user) {
      let me = this;
      let eventId = me.$route.params.id;
      this.$api.party.checkPlayer(eventId, user, res=>{
        user.checked = 1;
        user.note = res.data.model.note;
        me.query = '';

        // select seat
        if(me.model.hallName) {
          me.viewSeat(user);
        }

      });
    },
    restorePlayer(user) {
      let me = this;
      let eventId = me.$route.params.id;
      this.$api.party.restorePlayer(eventId, user, res=>{
        user.checked = 0;
        user.note = '';
      });
    },
    viewSeat(user) {
      let me = this;
      let eventId = me.$route.params.id;
      this.$api.party.loadUserEventSeat(eventId, user, res=>{
        if(res.data.model) {
          me.seats = res.data.model
          me.seatUser = user;
          me.modal = true;          
        }
      });
    },
    selectSeat() {
      let me = this;
      let eventId = me.$route.params.id;
      if(me.seats.selected.length != 1) {
          me.$q.notify({message: '请为用户选择1个座位！'});
        return;
      }

      let seatName = me.seats.selected[0];
      if(seatName == me.seatUser.seat) {
        me.modal = false; // no op
        return 
      } else {
        me.loading = true;
        me.$api.party.selectUserEventSeat(eventId, me.seatUser, seatName, res=>{
          me.seatUser.seat = seatName;
          me.loading = false;
          me.modal = false;
        }, error=>{
          me.loading = false;
        });
      }
    }
  },
  computed: {
    filteredList() {
      let query = this.query.toLowerCase();
      let selected = this.selected;
      return this.list.filter(function (user) {
        if(selected == '0' && user.confirmStatus != 'confirm') {
          return false;
        }
        if(selected != null && selected != user.checked) {
          return false;
        }
        if(query.length>0) {
          if(user.name.toLowerCase().indexOf(query)>=0) {
            return true;
          }
          if(user.phone.indexOf(query)>=0) {
            return true;
          }        
          return false;
        }
        return true;
      })
    },
    checkedCount() {
      let count = 0;
      this.list.forEach(item=>{
        if(item.checked == 1) count++;
      });
      return count + '';
    },
    uncheckedCount() {
      let count = 0;
      this.list.forEach(item=>{
        if(item.checked == 0 && item.confirmStatus=='confirm') count++;
      });
      return count + '';
    },
    blackedCount() {
      let count = 0;
      this.list.forEach(item=>{
        if(item.checked == -1) count++;
      });
      return count + '';
    }
  }
}
</script>
